<template>
  <div class="login" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">
    <canvas id="mycanvas"></canvas>
    <div class="loginBox">
      <div class="loginImage">
        <img class="img" src="@/assets/img/dllogo.png" alt="" />
      </div>
      <div class="loginInfo">
        <div class="title">重点工艺管控</div>
        <div class="right_left">
          <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef" label-width="0px" class="login_form">
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" placeholder="账号">
                <i slot="suffix" class="el-input__icon el-icon-user"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="loginForm.password" placeholder="密码">
                <i slot="suffix" class="el-input__icon el-icon-lock"></i>
              </el-input>
            </el-form-item>

            <el-form-item class="btnsGo">
              <el-button type="primary" @click="logins" @keyup.enter="keyDown(e)">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="loginCopy">
        <div class="copy">技术支持: Copyright © 四川云检科技发展有限公司</div>
        <div class="date">更新日期: 2023-07-07</div>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/request.js";
export default {
  data() {
    return {
      ctx: null,
      myCanvas: null,
      balls: [],
      centerY: null,
      speedX: null,
      speedY: null,
      color: null,
      loginForm: {
        // username: "system",
        // password: "yjxa369",
        username: "",
        password: "",
      },
      newpwd: "",
      loginFormRules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          // {  message: "长度在3 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 1,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
      loading: false,
      userInfo: {},
      leftNameDatae: [
        //系统业务数据字典
        // {
        //   rank: 1,
        //   title: "系统业务数据字典",
        //   img: "iconfont icon-yewu",
        //   name: "currencyManage",
        //   width: "24px",
        //   children: [{
        //       title: "标段回弹工程划分",
        //       lever: 2,
        //       name: "ProjectPage",
        //       path: "/ProjectPage",
        //       path2: "/ProjectPageText",
        //       name2: "ProjectPageText",
        //       img: "iconfont icon-jiancexiangmu",
        //       children: [],
        //       rank: 2,
        //     },
        //     {
        //       title: "试验检测依据管理",
        //       lever: 2,
        //       name: "experiment",
        //       path: "/experiment",
        //       path2: "/experimentText",
        //       name2: "experimentText",
        //       img: "iconfont icon-jiancexiangmu",
        //       children: [],
        //       rank: 2,
        //     },
        //     {
        //       title: "样品种类在线管理",
        //       lever: 1,
        //       name: "sample",
        //       path: "/sample",
        //       path2: "",
        //       img: "iconfont icon-jiancexiangmu",
        //       children: [],
        //       rank: 2,
        //     },
        //     {
        //       title: "检测仪器设备管理",
        //       lever: 2,
        //       name: "instrument",
        //       path: "/instrument",
        //       path2: "/instrumentText",
        //       name2: "instrumentText",
        //       img: "iconfont icon-jiancexiangmu",
        //       children: [],
        //       rank: 2,
        //     },
        //   ],
        // },
        // 工程结构现场检测
        // {
        //   rank: 1,
        //   title: "工程结构现场检测",
        //   img: "iconfont icon-jichuguanli",
        //   name: "PCManage",
        //   width: "24px",
        //   children: [{
        //       lever: 0,
        //       rank: 1,
        //       title: "混凝土回弹检测",
        //       img: "iconfont icon-yewu",
        //       name: "betonManage",
        //       width: "24px",
        //       children: [{
        //           title: "回弹检测结果管控-1",
        //           lever: 2,
        //           rank: 2,
        //           name: "Control-1",
        //           path: "/Control-1",
        //           path2: "/Control-1Text",
        //           name2: "Control-1Text",
        //           img: "iconfont icon-tongji",
        //           children: [],
        //           width: "24px",
        //         },
        //         {
        //           title: "回弹检测结果管控-2",
        //           lever: 2,
        //           rank: 2,
        //           name: "Control-2",
        //           path: "/Control-2",
        //           path2: "/Control-2Text",
        //           name2: "Control-2Text",
        //           img: "iconfont icon-tongji",
        //           children: [],
        //           width: "24px",
        //         },
        //         {
        //           title: "回弹检测结果管控-3",
        //           lever: 2,
        //           rank: 2,
        //           name: "Control-3",
        //           path: "/Control-3",
        //           path2: "/Control-3Text",
        //           name2: "Control-3Text",
        //           img: "iconfont icon-tongji",
        //           children: [],
        //           width: "24px",
        //         },
        //       ],
        //     },
        //     {
        //       lever: 0,
        //       rank: 1,
        //       title: "钢筋保护层检测",
        //       img: "iconfont icon-yewu",
        //       name: "coverManage",
        //       width: "24px",
        //       children: [{
        //           title: "钢筋保护层检测-1",
        //           lever: 2,
        //           rank: 2,
        //           name: "Steel-1",
        //           path: "/Steel-1",
        //           path2: "/Steel-1Text",
        //           name2: "Steel-1Text",
        //           img: "iconfont icon-tongji",
        //           children: [],
        //         },
        //         {
        //           title: "钢筋保护层检测-2",
        //           lever: 2,
        //           rank: 2,
        //           name: "Steel-2",
        //           path: "/Steel-2",
        //           path2: "/Steel-2Text",
        //           name2: "Steel-2Text",
        //           img: "iconfont icon-tongji",
        //           children: [],
        //         },
        //       ],
        //     },
        //     {
        //       lever: 0,
        //       rank: 2,
        //       title: "基桩工程检测管理",
        //       img: "iconfont icon-yewu",
        //       name: "pieManage",
        //       width: "24px",

        //       children: [{
        //           title: "基桩工程信息",
        //           lever: 2,
        //           rank: 0,
        //           name: "Engineering",
        //           path: "/engineering",
        //           path2: "/engineeringText",
        //           name2: "EngineeringText",
        //           img: "iconfont icon-tongji",
        //           children: [],
        //           width: "24px",
        //         },
        //         {
        //           title: "基桩检测信息",
        //           lever: 2,
        //           rank: 0,
        //           name: "Monitoring",
        //           path: "/Monitoring",
        //           path2: "/MonitoringText",
        //           name2: "MonitoringText",
        //           img: "iconfont icon-tongji",
        //           children: [],
        //           width: "24px",
        //         },
        //         {
        //           title: "基桩检测统计",
        //           lever: 0,
        //           rank: 2,
        //           name: "jisManage",
        //           img: "iconfont icon-tongji",
        //           width: "24px",
        //           children: [{
        //               title: "按建设项目统计",
        //               path: "/building",
        //               path2: "",
        //               img: "iconfont icon-tongji1",
        //               children: [],
        //               name: "building",
        //               rank: 3,
        //               lever: 3,
        //               width: "24px",
        //             },
        //             {
        //               title: "按施工标段统计",
        //               path: "/section",
        //               path2: "",
        //               img: "iconfont icon-tongji1",
        //               children: [],
        //               rank: 3,
        //               lever: 3,
        //               width: "24px",

        //               name: "section",
        //             },
        //             {
        //               title: "按工程项目统计",
        //               path: "/project",
        //               path2: "",
        //               img: "iconfont icon-tongji1",
        //               children: [],
        //               rank: 3,
        //               lever: 3,
        //               width: "24px",

        //               name: "project",
        //             },
        //           ],
        //         },
        //       ],
        //     },
        //   ],
        // },
        // 砼拌合生产质量管控
        // {
        //   rank: 1,
        //   title: "砼拌合生产质量管控",
        //   img: "iconfont icon-jurassic_engineer-info",
        //   name: "HntManage",
        //   width: "24px",
        //   children: [{
        //       title: "砼拌合生产配合比",
        //       lever: 2, //1只有查看    2带编辑页
        //       path: "/HntMixProportion",
        //       path2: "/HntMixProportionText",
        //       name: "HntMixProportion",
        //       name2: "HntMixProportionText",
        //       img: "iconfont icon-shengchanguanli1",
        //       children: [],
        //       rank: 2,
        //       width: "24px",
        //     },
        //     {
        //       lever: 1,
        //       path: "/supervisionList",
        //       path2: "",
        //       img: "iconfont icon-shengchanguanli1",
        //       children: [],
        //       rank: 2,
        //       title: "拌合生产数据信息",
        //       name: "supervisionList",
        //       width: "24px",

        //     },
        //     {
        //       lever: 1,
        //       path2: "",
        //       img: "iconfont icon-shengchanguanli1",
        //       children: [],
        //       rank: 2,
        //       title: "拌合生产超标监控",
        //       path: "/closure",
        //       name: "closure",
        //       width: "24px",

        //     },
        //     {
        //       title: "场站实测坍落度",
        //       lever: 2, //1只有查看    2带编辑页
        //       path: "/StationCollapse",
        //       path2: "/StationCollapseText",
        //       name: "StationCollapse",
        //       name2: "StationCollapseText",
        //       img: "iconfont icon-shengchanguanli1",
        //       children: [],
        //       rank: 2,
        //       width: "24px",
        //     },
        //     {
        //       title: "现场坍落度检测",
        //       lever: 2, //1只有查看    2带编辑页
        //       path: "/siteCollapse",
        //       path2: "/mixNnotice",
        //       name: "siteCollapse",
        //       name2: "mixNnotice",
        //       img: "iconfont icon-shengchanguanli1",
        //       children: [],
        //       rank: 2,
        //       width: "24px",
        //     },
        //     {
        //       title: "拌合设备检定管理",
        //       lever: 2, //1只有查看    2带编辑页
        //       path: "/EquipmentCalibration",
        //       path2: "/EquipmentCalibrationText",
        //       name: "EquipmentCalibration",
        //       name2: "EquipmentCalibrationText",
        //       img: "iconfont icon-shengchanguanli1",
        //       children: [],
        //       rank: 2,
        //       width: "24px",
        //     },
        //     {
        //       title: "拌合材料生产统计",
        //       lever: 0,
        //       rank: 2,
        //       name: "bhManage",
        //       img: "iconfont icon-shengchanguanli1",
        //       width: "24px",
        //       children: [{
        //           title: "拌合材料用量统计",
        //           path: "/deliverability",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           name: "deliverability",
        //           rank: 3,
        //           width: "24px",
        //         },

        //         {
        //           title: "用料偏差趋势分析",
        //           path: "/deviationTrend",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           name: "deviationTrend",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "阶段生产材料用量",
        //           path: "/Consumption",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           name: "Consumption",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "单日生产材料用量",
        //           path: "/timePeriod",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           name: "timePeriod",
        //           rank: 3,
        //           width: "24px",
        //         },
        //       ],
        //     },
        //     {
        //       title: "拌合生产方量统计",
        //       lever: 0,
        //       rank: 2,
        //       name: "stManage",
        //       img: "iconfont icon-shengchanguanli1",
        //       width: "24px",
        //       children: [{
        //           title: "阶段生产方量统计",
        //           path: "/output",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           name: "output",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "生产超标情况统计",
        //           path: "/exceedance",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           name: "exceedance",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "拌合材料消耗统计",
        //           path: "/material",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           name: "material",
        //           rank: 3,
        //           width: "24px",
        //         },
        //       ],
        //     },
        //     {
        //       title: "生产任务完成统计",
        //       lever: 0,
        //       rank: 2,
        //       name: "pcManage",
        //       img: "iconfont icon-shengchanguanli1",
        //       width: "24px",
        //       children: [{
        //           title: "任务单生产动态统计",
        //           path: "/productionAmount",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           name: "productionAmount",
        //           rank: 3,
        //           width: "24px",
        //         },

        //         {
        //           title: "任务单用料情况统计",
        //           path: "/materialConsumption",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           name: "materialConsumption",
        //           rank: 3,
        //           width: "24px",
        //         },
        //       ],
        //     },
        //     {
        //       title: "砼拌合机在线监控",
        //       lever: 0,
        //       rank: 2,
        //       name: "controlManage",
        //       img: "iconfont icon-shengchanguanli1",
        //       width: "24px",
        //       children: [{
        //         title: "砼拌和机联网状态",
        //         path: "/networkStatus",
        //         path2: "",
        //         img: "iconfont icon-cailiaozhengli",
        //         children: [],
        //         name: "networkStatus",
        //         rank: 3,
        //         width: "24px",
        //       }, ],
        //     },
        //     {
        //       title: "砼拌合站参数设置",
        //       lever: 0,
        //       rank: 2,
        //       name: "TbhxtManage",
        //       img: "iconfont icon-shengchanguanli1",
        //       width: "24px",
        //       children: [{
        //           title: "项目部拌合站信息",
        //           name: "mixingPlant",
        //           path: "/mixingPlant",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           rank: 3,
        //           width: "24px",
        //         },

        //         {
        //           title: "材料超标参数设置",
        //           name: "alarmParameterSetting",
        //           path: "/alarmParameterSetting",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "预警通知人员对象",
        //           name: "warningObject",
        //           path: "/warningObject",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           rank: 2,
        //           width: "24px",
        //         },
        //         {
        //           title: "预警短信模板管理",

        //           name: "warningInformation",
        //           path: "/warningInformation",
        //           path2: "",
        //           img: "iconfont icon-cailiaozhengli",
        //           children: [],
        //           rank: 3,
        //           width: "24px",
        //         },
        //       ],
        //     },

        //   ],
        // },
        // 水稳
        // {
        //   rank: 1,
        //   title: "水稳拌合生产质量管控",
        //   img: "iconfont icon-shuixitong",
        //   name: "WaterManage",
        //   width: "24px",
        //   children: [{
        //       lever: 1,
        //       path: "/instantly",
        //       path2: "",
        //       img: "iconfont icon-jianzhucailiao",
        //       children: [],
        //       rank: 2,
        //       title: "动态监控",
        //       name: "instantly",
        //       width: "24px",
        //     },
        //     {
        //       lever: 1,
        //       path: "/superRecord",
        //       path2: "",
        //       img: "iconfont icon-jianzhucailiao",
        //       children: [],
        //       rank: 2,
        //       title: "水稳超标生产拌合监控",
        //       name: "superRecord",
        //       width: "24px",
        //     },
        //     {
        //       title: "拌合设备检定管理",
        //       lever: 2, //1只有查看    2带编辑页
        //       path: "/Equipment",
        //       path2: "/EquipmentText",
        //       name: "Equipment",
        //       name2: "EquipmentText",
        //       img: "iconfont icon-jianzhucailiao",
        //       children: [],
        //       rank: 2,
        //       width: "24px",
        //     },
        //     {
        //       title: "数据分析",
        //       lever: 0,
        //       rank: 2,
        //       name: "analyse",
        //       img: "iconfont icon-jianzhucailiao",
        //       width: "24px",
        //       children: [{
        //           title: "产能分析",
        //           path: "/waterProduce",
        //           path2: "",
        //           img: "iconfont icon-shujufenxi2",
        //           children: [],
        //           name: "waterProduce",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "材料用量走势图",
        //           path: "/waterConsumption",
        //           path2: "",
        //           img: "iconfont icon-shujufenxi2",
        //           children: [],
        //           name: "waterConsumption",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "材料百分比走势",
        //           path: "/percentage",
        //           path2: "",
        //           img: "iconfont icon-shujufenxi2",
        //           children: [],
        //           name: "percentage",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "材料偏差走势图",
        //           path: "/WaterDeviation",
        //           path2: "",
        //           img: "iconfont icon-shujufenxi2",
        //           children: [],
        //           name: "WaterDeviation",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "产量统计",
        //           path: "/waterOutput",
        //           path2: "",
        //           img: "iconfont icon-shujufenxi2",
        //           children: [],
        //           name: "waterOutput",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "原材料消耗",
        //           path: "/waterMaterial",
        //           path2: "",
        //           img: "iconfont icon-shujufenxi2",
        //           children: [],
        //           name: "waterMaterial",
        //           rank: 3,
        //           width: "24px",
        //         },
        //       ],
        //     },

        //     {
        //       title: "系统设置",
        //       lever: 0,
        //       rank: 2,
        //       name: "swHxtManage",
        //       img: "iconfont icon-jianzhucailiao",
        //       width: "24px",
        //       children: [{
        //           title: "拌合站设置",
        //           name: "swMixingPlant",
        //           path: "/swMixingPlant",
        //           path2: "",
        //           img: "iconfont icon-shujufenxi2",
        //           children: [],
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "材料超标参数设置",
        //           name: "swAlarmParameterSetting",
        //           path: "/swAlarmParameterSetting",
        //           path2: "",
        //           img: "iconfont icon-shujufenxi2",
        //           children: [],
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "预警通知人员对象",
        //           name: "sWwarningObject",
        //           path: "/sWwarningObject",
        //           path2: "",
        //           img: "iconfont icon-shujufenxi2",
        //           children: [],
        //           rank: 2,
        //           width: "24px",
        //         },
        //         {
        //           title: "预警短信模板",
        //           path: "/sWwarningInformation",
        //           path2: "",
        //           img: "iconfont icon-shujufenxi2",
        //           children: [],
        //           name: "sWwarningInformation",
        //           rank: 3,
        //           width: "24px",
        //         },
        //       ],
        //     },
        //   ],
        // },
        // 沥青
        // {
        //   rank: 1,

        //   title: "沥青拌合生产质量管控", // 云检沥青拌和站生产与动态监控系统
        //   img: "iconfont icon-G-banhezhan",
        //   name: "pitchManage",
        //   width: "24px",
        //   path: "/real_timeMonitoring",
        //   path2: "",
        //   children: [

        //     {
        //       title: "标段配方管理",
        //       path: "/mixProportion",
        //       path2: "",
        //       lever: 1,
        //       img: "iconfont icon-shengchanguanli1",
        //       children: [],
        //       name: "mixProportion",
        //       rank: 2,
        //       width: "24px",
        //     },
        //     {
        //       title: "拌合生产数据信息",
        //       path: "/real_timeData",
        //       path2: "",

        //       img: "iconfont icon-shengchanguanli1",
        //       children: [],
        //       lever: 1,
        //       name: "real_timeData",
        //       rank: 2,
        //       width: "24px",
        //     },
        //     {
        //       title: "误差监控",
        //       path: "/errorMonitoring",
        //       path2: "",
        //       lever: 1,

        //       img: "iconfont icon-shengchanguanli1",
        //       children: [],
        //       name: "errorMonitoring",
        //       rank: 2,
        //       width: "24px",
        //     },
        //     {
        //       title: "拌合设备检定管理",
        //       lever: 2, //1只有查看    2带编辑页
        //       path: "/lqEquipment",
        //       path2: "/lqEquipmentText",
        //       name: "lqEquipment",
        //       name2: "lqEquipmentText",

        //       img: "iconfont icon-shengchanguanli1",
        //       children: [],
        //       rank: 2,
        //       width: "24px",
        //     },

        //     {
        //       title: "系统设置",
        //       lever: 0,
        //       rank: 2,
        //       name: "lqxtManage",
        //       img: "iconfont icon-shengchanguanli1",
        //       width: "24px",
        //       children: [{
        //           title: "拌合站设置",
        //           name: "lqMixingPlant",
        //           path: "/lqMixingPlant",
        //           path2: "",
        //           img: "iconfont icon-tongjibaobiao2",
        //           children: [],
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "报警参数设置",
        //           path: "/lqAlarmParameterSetting",
        //           path2: "",
        //           img: "iconfont icon-tongjibaobiao2",
        //           children: [],
        //           name: "lqAlarmParameterSetting",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "预警通知人员对象",
        //           name: "lqwarningObject",
        //           path: "/lqwarningObject",
        //           path2: "",
        //           img: "iconfont icon-tongjibaobiao2",
        //           children: [],
        //           rank: 2,
        //           width: "24px",
        //         },
        //         {
        //           title: "预警短信模板",
        //           path: "/lqWarningInformation",
        //           path2: "",
        //           img: "iconfont icon-tongjibaobiao2",
        //           children: [],
        //           name: "lqWarningInformation",
        //           rank: 3,
        //           width: "24px",
        //         },
        //       ],
        //     },
        //   ],
        // },

        //张拉
        {
          rank: 1,
          title: "智能张拉质量管控",
          img: "iconfont icon-xitong",
          name: "TensionManage",
          width: "24px",
          children: [
            {
              lever: 1,
              title: "实时数据查询",
              path: "/tensionManage/tensionRealTime",
              name: "TensionRealTime",
              path2: "",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              rank: 2,
              width: "24px",
            },
            {
              lever: 1,
              title: "超标数据查询",
              path: "/tensionManage/tensionExceedData",
              name: "TensionExceedData",
              path2: "",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              rank: 2,
              width: "24px",
            },
            {
              lever: 1,
              title: "张拉质量趋势",
              path: "/tensionManage/tensionExceedHandle",
              name: "TensionExceedHandle",
              path2: "",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              rank: 2,
              width: "24px",
            },
            {
              title: "系统设置",
              lever: 0,
              rank: 2,
              name: "TensionYjxtManage",
              img: "iconfont icon-shengchanguanli1",
              width: "24px",
              children: [
                {
                  title: "梁场信息设置",
                  name: "TensionBeamYard",
                  path: "/TensionBeamYard",
                  path2: "",
                  // img: "iconfont icon-shujuyujing",
                  img: "iconfont icon-renyuanyidongyujing",
                  children: [],
                  rank: 3,
                  width: "24px",
                },
                {
                  title: "预警信息设置",
                  path: "/TensionEarlyWarning",
                  name: "TensionEarlyWarning",
                  path2: "",
                  // img: "iconfont icon-shujuyujing",
                  img: "iconfont icon-renyuanyidongyujing",
                  children: [],
                  rank: 3,
                  width: "24px",
                },
                {
                  title: "预警人员设置",
                  path: "/TensionWarningPerson",
                  name: "TensionWarningPerson",
                  path2: "",
                  // img: "iconfont icon-renyuanyidongyujing",
                  img: "iconfont icon-renyuanyidongyujing",
                  children: [],
                  rank: 3,
                  width: "24px",
                },
                {
                  title: "预警短信模板管理",
                  name: "TensionAlertTemplate",
                  path: "/TensionAlertTemplate",
                  path2: "",
                  // img: "iconfont icon-renyuanyidongyujing",
                  img: "iconfont icon-renyuanyidongyujing",
                  children: [],
                  rank: 3,
                  width: "24px",
                },
              ],
            },
          ],
        },
        //张拉
        //压浆
        {
          rank: 1,
          title: "智能压浆质量管控",
          img: "iconfont icon-shishishujubukedianji",
          name: "GroutManage",
          width: "24px",
          children: [
            {
              lever: 1,
              title: "实时数据查询",
              path: "/groutManage/groutRealTime",
              name: "GroutRealTime",
              path2: "",
              name2: "",
              img: "iconfont icon-renyuanyidongyujing",
              children: [],
              rank: 2,
              width: "24px",
            },
            {
              lever: 1,
              title: "超标数据查询",
              path: "/groutManage/groutExceedData",
              name: "GroutExceedData",
              path2: "",
              name2: "",
              img: "iconfont icon-renyuanyidongyujing",
              children: [],
              rank: 2,
              width: "24px",
            },
            {
              lever: 1,
              title: "压浆质量趋势",
              path: "/groutManage/groutExceedHandle",
              name: "GroutExceedHandle",
              path2: "",
              name2: "",
              img: "iconfont icon-renyuanyidongyujing",
              children: [],
              rank: 2,
              width: "24px",
            },
            {
              title: "系统设置",
              lever: 0,
              rank: 2,
              name: "GroutYjxtManage",
              img: "iconfont icon-renyuanyidongyujing",
              // img: "iconfont icon-shengchanguanli1",
              width: "24px",
              children: [
                {
                  title: "梁场信息设置",
                  name: "GroutBeamYard",
                  path: "/GroutBeamYard",
                  path2: "",
                  // img: "iconfont icon-shujuyujing",
                  img: "iconfont icon-renyuanyidongyujing",
                  children: [],
                  rank: 3,
                  width: "24px",
                },
                {
                  title: "预警信息设置",
                  path: "/groutEarlyWarning",
                  name: "GroutEarlyWarning",
                  path2: "",
                  // img: "iconfont icon-shujuyujing",
                  img: "iconfont icon-renyuanyidongyujing",
                  children: [],
                  rank: 3,
                  width: "24px",
                },
                {
                  title: "预警人员设置",
                  path: "/GroutWarningPerson",
                  name: "GroutWarningPerson",
                  path2: "",
                  // img: "iconfont icon-renyuanyidongyujing",
                  img: "iconfont icon-renyuanyidongyujing",
                  children: [],
                  rank: 3,
                  width: "24px",
                },
                {
                  title: "预警短信模板管理",
                  name: "GroutAlertTemplate",
                  path: "/GroutAlertTemplate",
                  path2: "",
                  // img: "iconfont icon-renyuanyidongyujing",
                  img: "iconfont icon-renyuanyidongyujing",
                  children: [],
                  rank: 3,
                  width: "24px",
                },
              ],
            },
          ],
        },
        //压浆
        // {
        //   rank: 1,
        //   title: "压浆作业质量管控",
        //   img: "iiconfont icon-shishishujubukedianji",
        //   name: "GroutManage",
        //   width: "24px",
        //   children: [{
        //       lever: 1,
        //       title: "实时数据查询",
        //       path: "/GroutRealTime",
        //       name: "GroutRealTime",
        //       path2: "",
        //       img: "iconfont icon-renyuanyidongyujing",
        //       children: [],
        //       rank: 2,

        //       width: "24px",
        //     }, {
        //       lever: 1,
        //       title: "超标数据查询",
        //       path: "/groutManage/groutExceedData",
        //       name: "GroutExceedData",
        //       path2: "",
        //       img: "iconfont icon-renyuanyidongyujing",
        //       children: [],
        //       rank: 2,
        //       width: "24px",
        //     }, {
        //       lever: 1,
        //       title: "压浆质量趋势",
        //       path: "/GroutExceedHandle",
        //       name: "GroutExceedHandle",
        //       path2: "",
        //       img: "iconfont icon-renyuanyidongyujing",
        //       children: [],
        //       rank: 2,
        //       width: "24px",
        //     },

        //     {
        //       title: "系统设置",
        //       lever: 0,
        //       rank: 2,
        //       name: "GroutYjxtManage",
        //       img: "iconfont icon-shujubiangeng",
        //       width: "24px",
        //       children: [{
        //           title: "梁场信息设置",
        //           name: GroutBeamYard",
        //           path: "/GroutBeamYard",
        //           path2: "",
        //           img: "iconfont icon-renyuanyidongyujing",
        //           children: [],
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "预警信息设置",
        //           path: "/GroutEarlyWarning",
        //           name: "GroutEarlyWarning",
        //           path2: "",
        //           img: "iconfont icon-renyuanyidongyujing",
        //           children: [],
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "预警人员设置",
        //           path: "/GroutWarningPerson",
        //           name: "GroutWarningPerson",
        //           path2: "",
        //           img: "iconfont icon-renyuanyidongyujing",
        //           children: [],
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "预警短信模板管理",
        //           name: "GroutAlertTemplate",
        //           path: "/GroutAlertTemplate",
        //           path2: "",
        //           img: "iconfont icon-renyuanyidongyujing",
        //           children: [],
        //           rank: 3,
        //           width: "24px",
        //         },
        //       ],
        //     },
        //   ],
        // },
        //张拉 压浆
        //现场生产质量管控
        // {
        //   rank: 1,
        //   title: "现场生产质量管控",
        //   img: "iconfont icon-gongcheng",
        //   name: "stationQuality",
        //   width: "24px",
        //   children: [{
        //       title: "班组首件工程管理",
        //       lever: 2,
        //       name: "groupClass",
        //       path: "/groupClass",
        //       path2: "/groupClassText",
        //       name2: "groupClassText",
        //       img: "iconfont icon-fenxi",
        //       children: [],
        //       rank: 2,
        //     },
        //     {
        //       title: "工序报验质量管理",
        //       lever: 0,
        //       rank: 2,
        //       name: "QualityWork",
        //       img: "iconfont icon-fenxi",
        //       width: "24px",
        //       children: [{
        //           title: "WBS工程划分管理",
        //           img: "iconfont icon-zuzhijigou-jianying",
        //           children: [],
        //           name: "stationWorkList",
        //           path: "/stationWorkList",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "完工工序报验管理",
        //           img: "iconfont icon-zuzhijigou-jianying",
        //           children: [],
        //           name: "ProcessInspection",
        //           path: "/ProcessInspection",
        //           name2: "ProcessInspectionText",
        //           path2: "/ProcessInspectionText",
        //           rank: 3,
        //           width: "24px",
        //         },
        //       ],
        //     },

        //     {
        //       title: "质量责任网格管理",
        //       lever: 0,
        //       rank: 2,
        //       name: "QualityResponsibility",
        //       img: "iconfont icon-fenxi",
        //       width: "24px",
        //       children: [{
        //           title: "场站/实体质量网格",
        //           img: "iconfont icon-zuzhijigou-jianying",
        //           children: [],
        //           name: "stationQualityList",
        //           path: "/stationQualityList",
        //           path2: "/stationQualityListText",
        //           name2: "stationQualityListText",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "场站/实体开工管理",
        //           img: "iconfont icon-zuzhijigou-jianying",
        //           children: [],
        //           name: "startLook",
        //           path: "/startLook",
        //           path2: "/startText",
        //           name2: "startText",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "质量管理责任网格",
        //           img: "iconfont icon-zuzhijigou-jianying",
        //           children: [],
        //           name: "responsibility",
        //           path: "/responsibility",
        //           path2: "/responsibilityText",
        //           name2: "responsibilityText",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "巡查问题管理",
        //           img: "iconfont icon-zuzhijigou-jianying",
        //           children: [],
        //           name: "patrol",
        //           path: "/patrol",
        //           rank: 3,
        //           width: "24px",
        //         },
        //       ],
        //     },
        //     {
        //       title: "第三方检查信息管理",
        //       lever: 2,
        //       name: "ThreeCheck",
        //       path: "/ThreeCheck",
        //       path2: "/ThreeCheckText",
        //       name2: "ThreeCheckText",
        //       img: "iconfont icon-fenxi",
        //       children: [],
        //       rank: 2,
        //     },
        //     {
        //       title: "工作指令动态管理",
        //       lever: 0,
        //       rank: 2,
        //       name: "workOrder",
        //       img: "iconfont icon-fenxi",
        //       width: "24px",
        //       children: [{
        //           title: "工作指令在线下发",
        //           img: "iconfont icon-zuzhijigou-jianying",
        //           children: [],
        //           name: "distribute",
        //           path: "/distribute",
        //           path2: "/distributeText",
        //           name2: "distributeText",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "工作指令执行报告",
        //           img: "iconfont icon-zuzhijigou-jianying",
        //           children: [],
        //           name: "execute",
        //           path: "/execute",
        //           path2: "/executeText",
        //           name2: "executeText",
        //           rank: 3,
        //           width: "24px",
        //         },
        //       ],
        //     },
        //   ],
        // },
        // 系统管理
        // {
        //   rank: 1,
        //   title: "系统管理",
        //   img: "iconfont icon-xitongguanli",
        //   name: "SysManage",
        //   width: "24px",
        //   children: [{
        //       title: "组织机构",
        //       rank: 2,
        //       img: "iconfont icon-zuzhijigou-jianying",
        //       name: "BaseManage",
        //       lever: 0,
        //       width: "24px",
        //       children: [{
        //           title: "机构管理",
        //           path: "/mechanism",
        //           path2: "",
        //           img: "iconfont icon-jigouguanli1",
        //           children: [],
        //           name: "CompanyManage",
        //           rank: 3,
        //           width: "24px",
        //         },
        //         {
        //           title: "部门管理",
        //           path: "/department",
        //           path2: "",
        //           img: "iconfont icon-jigouguanli1",
        //           children: [],
        //           rank: 3,
        //           name: "DepartmentManage",
        //           width: "24px",
        //         },
        //         {
        //           title: "岗位管理",
        //           path: "/postManagement",
        //           path2: "",
        //           img: "iconfont icon-jigouguanli1",
        //           children: [],
        //           rank: 3,
        //           name: "PostManage",
        //           width: "24px",
        //         },
        //         {
        //           title: "角色管理",
        //           path: "/roleManagement",
        //           path2: "",
        //           img: "iconfont icon-jigouguanli1",
        //           children: [],
        //           rank: 3,
        //           name: "RoleManage",
        //           width: "24px",
        //         },
        //         {
        //           title: "用户管理",
        //           path: "/user",
        //           path2: "",
        //           img: "iconfont icon-jigouguanli1",
        //           children: [],
        //           rank: 3,
        //           name: "UserManage",
        //           width: "24px",
        //         },
        //       ],
        //     },
        //     {
        //       title: "数据字典",
        //       img: "iconfont icon-zuzhijigou-jianying",
        //       path: "/dictionaryPage",
        //       path2: "",
        //       name: "dictionaryPage",
        //       lever: 1,
        //       rank: 2,
        //       children: [],
        //       width: "24px",
        //     },
        //     {
        //       title: "敏捷开发",
        //       rank: 2,
        //       img: "iconfont icon-zuzhijigou-jianying",
        //       name: "minjManage",
        //       lever: 0,
        //       width: "24px",
        //       children: [{
        //           title: "代码生成器",
        //           path: "/codeGenerator",
        //           path2: "",
        //           img: "iconfont icon-jigouguanli1",
        //           children: [],
        //           name: "codeGenerator",
        //           rank: 3,
        //           width: "24px",
        //         },

        //       ],
        //     },
        //     {
        //       title: "系统功能",
        //       img: "iconfont icon-zuzhijigou-jianying",
        //       path: "/systemData",
        //       path2: "",
        //       name: "systemData",
        //       lever: 1,
        //       rank: 2,
        //       children: [],
        //       width: "24px",
        //     },
        //   ],
        // },
      ],
    };
  },
  mounted() {
    // 绑定监听事件
    window.addEventListener("keydown", this.keyDown);
    // this.getTu()
    this.canvas();
  },
  destroyed() {
    // 销毁事件
    window.removeEventListener("keydown", this.keyDown, false);
  },

  methods: {
    getTu() {
      // var canvas = mycanvas;
      var canvas = document.getElementById("mycanvas");

      /*获取屏幕宽高。用作适配*/
      var w = window.innerWidth;
      var h = window.innerHeight;
      canvas.width = w;
      canvas.height = h;
      canvas.backgroundColor = "#000";
      var ctx = canvas.getContext("2d");

      function Build() {
        this.ctx = ctx;
        this.counts = 300; //最大粒子数
        this.maxSize = 4; //初始化最大的大小
        (this.halfWidth = w / 2), (this.halfHeight = h / 2);
        this.arr = []; //用于存储变量
      }
      Build.prototype.add = function (coor) {
        var grd = this.ctx.createRadialGradient(
          coor.x,
          coor.y,
          coor.size / 2,
          coor.x,
          coor.y,
          coor.size
        );
        grd.addColorStop(0, "white");
        grd.addColorStop(1, coor.color);
        this.ctx.fillStyle = grd;
        this.ctx.beginPath();
        this.ctx.arc(coor.x, coor.y, coor.size, 0, Math.PI * 2, true);
        this.ctx.transform(1, 0, 0, 1, 0, coor.z);
        this.ctx.closePath();
        this.ctx.fill();
      };
      Build.prototype.init = function () {
        this.run();
        this.render();
        this.animate();
      };
      Build.prototype.run = function () {
        var nums = 0;
        while (nums < this.counts) {
          var coor = {
            x: Math.ceil(Math.random() * w),
            y: Math.ceil(Math.random() * h),
            posx: Math.random() * w - this.halfWidth,
            posy: Math.random() * h - this.halfHeight,
            fl: 100,
            speed: Math.random() * 1,
            posz: Math.random() * 250,
            r: Math.ceil(Math.random() * this.maxSize),
            color:
              "rgba(" +
              Math.ceil(Math.random() * 255) +
              "," +
              Math.ceil(Math.random() * 255) +
              "," +
              Math.ceil(Math.random() * 255) +
              "," +
              Math.random() +
              ")",
          };
          this.arr.push(coor);
          nums++;
        }
      };
      Build.prototype.clear = function () {
        ctx.clearRect(0, 0, w, h);
      };
      Build.prototype.render = function () {
        this.clear();
        for (var item of this.arr) {
          this.draw(item);
        }
      };
      (Build.prototype.animate = function () {
        var _this = this;
        this.render();
        /*api自带方法*/
        window.requestAnimationFrame(function () {
          _this.animate();
        });
      }),
        (Build.prototype.draw = function (item) {
          if (item.posz > -item.fl) {
            /*连续修改scale，保持变化，用于控制量子大小，在屏幕上的位置*/
            var scale = item.fl / (item.fl + item.posz);
            /*修改对应数据*/
            item.x = this.halfWidth + item.posx * scale;
            item.y = this.halfHeight + item.posy * scale;
            item.size = item.r * scale;
            item.posz -= item.speed;
          } else {
            /*初始化超出屏幕的量子。达成屏幕量子数量保持衡量的方法*/
            item.posz = Math.random() * 250;
          }
          this.add(item);
        });
      var app = new Build();
      app.init();
      window.addEventListener(
        "resize",
        function () {
          canvas.width = w = window.innerWidth;
          canvas.height = h = window.innerHeight;
        },
        false
      );
    },
    canvas() {
      var myCanvas = document.getElementById("mycanvas");
      var ctx = myCanvas.getContext("2d");
      var w = window.innerWidth;
      var h = window.innerHeight;
      myCanvas.width = w;
      myCanvas.height = h;
      // var min = 1;

      var max = 3;

      // myCanvas.width = document.documentElement.clientWidth;

      // myCanvas.height = document.documentElement.clientHeight;

      function Ball() {
        this.centerX = getRandom(max, myCanvas.width - max);

        this.centerY = getRandom(max, myCanvas.height - max);

        this.radius = getRandom(1, 3);

        this.color = getRandomColor();

        var speed1 = getRandom(1, 1);

        this.speedX = getRandom(0, 1) ? -speed1 : speed1;

        var speed2 = getRandom(1, 1);

        this.speedY = getRandom(0, 1) ? -speed2 : speed2;
      }

      Ball.prototype.move = function () {
        this.centerX += this.speedX;

        this.centerY += this.speedY;
      };

      Ball.prototype.draw = function () {
        ctx.beginPath();

        ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI * 2, false);

        ctx.closePath();

        ctx.fillStyle = this.color;

        ctx.fill();
      };

      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
      }

      function getRandomColor() {
        return "#76A6FB";
        // return "rgb(" + red + "," + green + "," + blue + ")";
      }

      //   var count = 1000;
      var count = 100;

      var balls = [];

      for (var i = 0; i < count; i++) {
        var ball = new Ball();

        balls.push(ball);
      }

      function startAnimation() {
        ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);

        ctx.font = "100px STKaiTi";

        ctx.strokeStyle = "white";

        // ctx.strokeText("SQ", myCanvas.width / 2.2, myCanvas.height / 2, 500);

        for (i = 0; i < balls.length; i++) {
          balls[i].move();

          balls[i].draw();
        }

        adjustPB();
      }

      // setInterval("startAnimation()", 5500);
      setInterval(() => {
        startAnimation();
      }, 50);

      //碰壁反弹

      function adjustPB() {
        for (var i = 0; i < balls.length; i++) {
          if (
            balls[i].centerX <= balls[i].radius ||
            balls[i].centerX >= myCanvas.width - balls[i].radius
          ) {
            balls[i].speedX *= -1;
          }

          if (
            balls[i].centerY <= balls[i].radius ||
            balls[i].centerY >= myCanvas.height - balls[i].radius
          ) {
            balls[i].speedY *= -1;
          }
        }
      }
      window.addEventListener(
        "resize",
        function () {
          myCanvas.width = w = window.innerWidth;
          myCanvas.height = h = window.innerHeight;
        },
        false
      );
    },

    // 重置按钮
    reset: function () {
      this.$refs.loginFormRef.resetFields();
    },
    keyDown(e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode == 13 || e.keyCode == 100) {
        this.logins(); // 定义的登录方法
      }
    },

    logins() {
      localStorage.clear();
      sessionStorage.clear();

      // 登录消息预验证
      this.userInfo = JSON.parse(sessionStorage.getItem("GxEmbedded_userInfo"));
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) {
          this.$message.error("请输入账号或密码");
          return;
        }
        this.loading = true;
        this.newpwd = this.$md5(this.loginForm.password.toLowerCase()); //密码加密
        login({
          username: this.loginForm.username,
          password: this.newpwd,
        })
          .then((res) => {
            if (res.errcode == 0) {
              console.log("res", res);
              this.$store.commit(
                "increase",
                JSON.stringify(this.leftNameDatae)
              );
              // console.log(res);
              localStorage.setItem("GxEmbedded_token", res.data.session); // 将token本地存储到回话中
              //本地需要存的信息
              window.sessionStorage.setItem(
                "GxEmbedded_CompanyNature",
                JSON.stringify(res.data.CompanyNature)
              );

              window.sessionStorage.setItem(
                "GxEmbedded_ModuleList",
                JSON.stringify(res.data.ModuleList)
              );
              window.sessionStorage.setItem(
                "GxEmbedded_userInfo",
                JSON.stringify(res.data.userInfo)
              );
              this.$store.commit(
                "GxEmbedded_userInfoData",
                JSON.stringify(res.data.userInfo)
              );

              window.sessionStorage.setItem(
                "GxEmbedded_surfaceList", //表面计算
                JSON.stringify(res.data.surfaceList)
              );
              window.sessionStorage.setItem(
                "GxEmbedded_detectionList", //角度计算
                JSON.stringify(res.data.detectionList)
              );
              window.sessionStorage.setItem(
                "GxEmbedded_concretetypeList", //泵送混凝土
                JSON.stringify(res.data.concretetypeList)
              );
              window.sessionStorage.setItem(
                "GxEmbedded_concretetypeunList", ////非泵送混凝土
                JSON.stringify(res.data.concretetypeunList)
              );

              var activePath;
              if (
                sessionStorage.getItem("GxEmbedded_keyPath") &&
                sessionStorage.getItem("GxEmbedded_keyPath") != "null" &&
                sessionStorage.getItem("GxEmbedded_keyPath") != "" &&
                this.userInfo.userId == res.data.userInfo.userId
              ) {
                activePath = sessionStorage.getItem("GxEmbedded_keyPath");
              } else {
                activePath = "/tensionManage/tensionRealTime";
              }

              this.$message.success("登录成功");
              this.$router.push(activePath);
            } else {
              this.$message.error("登录失败,请检查账号和密码");
              this.loading = false;
              return false;
            }
          })
          .catch(() => {
            this.$message.error("登录失败，请检查账号和密码");
            this.loading = false;
            return false;
          });
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/views/login.less";
</style>
